<template>
    <div class="functionbox">
        <ul class="functionul">
            <li @click.prevent="routerlinkHandle" data-componentName="CourseList" data-index="0">
                <div>
                    <Opportunity :class="{ 'chosenColor': chosenIndex == 0 }" class="icon" />
                    <em :class="{ 'chosenColor': chosenIndex == 0 }">
                        我的课程
                    </em>
                </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Exam" data-index="1">
                <div>
                    <MagicStick :class="{ 'chosenColor': chosenIndex == 1 }" class="icon" />
                    <em :class="{ 'chosenColor': chosenIndex == 1 }">
                        待答考试
                    </em>
                </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Note" data-index="2">
                <div class="funcItem">
                    <ChatLineRound :class="{ 'chosenColor': chosenIndex == 2 }" class="icon" />
                    <em :class="{ 'chosenColor': chosenIndex == 2 }">
                        通知
                    </em>
                    <i class="noRead"></i>
                </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Help" data-index="3">
                <div class="funcItem">
                    <Document :class="{ 'chosenColor': chosenIndex == 3 }" class="icon" />
                    <em :class="{ 'chosenColor': chosenIndex == 3 }">
                        使用说明
                    </em>
                </div>
            </li>
        </ul>
    </div>
</template>


<script setup>
import { ref, defineEmits, onMounted } from 'vue'

// 定义上抛事件
const emit = defineEmits(['funcJump'])

// mounted钩子
onMounted(() => {
    // 在首页组件（index），功能列表首次挂载，默认加载课程列表组件
    emit('funcJump', "CourseList")

})

// 当前功能索引
let chosenIndex = ref(0)

function routerlinkHandle(e) {
    let componentname = e.currentTarget.dataset.componentname
    let index = e.currentTarget.dataset.index
    chosenIndex.value = index
    emit('funcJump', componentname)
}

</script>


<style scoped>
.functionbox {
    width: 220px;
    padding-top: 20px;
    /* background-color: deeppink; */
}

.functionul li div {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
}

.funcItem {
    position: relative;
}

.noRead {
    position: absolute;
    top: 40%;
    left: 92px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: red;
    border: 1 solid #000;
}

.functionul li .icon {
    width: 20px;
    color: #4c4c4c;
    margin-left: 30px;
    margin-right: 10px;
}

.functionul li em {
    padding: 5px 0;
    line-height: 30px;
    font-size: 14px;
    color: #4c4c4c;
}

.functionul li em:hover {
    cursor: default;
    /* color: red; */
}

.functionul li:hover em,
.functionul li:hover .icon {
    color: #0099ff !important;
}

.chosenColor {
    color: #0099ff !important;

}
</style>